<template>
    <div class="exam-list">
    <h1 style="text-align: center;">批改试卷</h1>
      <el-row :gutter="20">
        <el-col :span="8" v-for="(exam, index) in paginatedExams" :key="index">
          <el-card class="exam-card">
            <div class="exam-title">{{ exam.name }}</div>
            <div class="exam-info">
              <div><strong>科目：</strong>{{ exam.subject }}</div>
              <div><strong>姓名：</strong>{{ exam.student }}</div>
              <div><strong>日期：</strong>{{ exam.date }}</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
  
      <!-- 分页 -->
      <el-pagination
        class="pagination"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="exams.length"
        @current-change="handlePageChange"
      />
    </div>
  </template>
  
  <script setup>
  import { ref, computed } from 'vue';
  
  const exams = ref([
  {
    name: '2024一年级期末考试',
    subject: '语文',
    student: '张三',
    date: '2024-1-1',
  },
  {
    name: '2024一年级期末考试',
    subject: '语文',
    student: '李四',
    date: '2024-1-1',
  },
  {
    name: '2024一年级期末考试',
    subject: '语文',
    student: '王五',
    date: '2024-1-1',
  },
  {
    name: '2024一年级期末考试',
    subject: '语文',
    student: '老六',
    date: '2024-1-1',
  },
]);
  
  const currentPage = ref(1);
  const pageSize = ref(6); // 每页显示 6 个考试条目
  
  // 计算当前页的考试数据
  const paginatedExams = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value;
    const end = start + pageSize.value;
    return exams.value.slice(start, end);
  });
  
  // 处理页码变化
  const handlePageChange = (page) => {
    currentPage.value = page;
  };
  </script>
  
  <style scoped>
  .exam-list {
  padding: 20px;
}

.exam-card {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.exam-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.exam-info {
  font-size: 14px;
  color: #666;
}

.exam-info div {
  margin-bottom: 8px;
}
  .pagination {
    margin-top: 20px;
    text-align: center;
  }
  </style>